<template lang="html">
  <div class="login">
    <v-header>
      <h1 slot="title">注册</h1>
    </v-header>
    <section>
      <mt-field
       label="账号"
        placeholder="请输入账号"
        type = "text"
        v-model = "account"
      
        ></mt-field>
      <mt-field
       label="密码"
       placeholder="请输入密码"
       type="password"
       v-model="password"
     
        ></mt-field>
      
    </section>
    <mt-button
     plain
     size="large"
     @click="login"
     >注册</mt-button>
  

  </div>
</template>

<script>
import Header from "@/common/_header.vue";
import { Toast } from "mint-ui";
export default {
  components: {
    "v-header": Header
  },
  data() {
    return {
      account: "",
      password: "",
      toggle: !this.$store.state.login.token
    };
  },
  methods: {
    // 登录按钮
    login() {
      if (this.account === "" || this.password === "") {
        this.$toast("注册信息不能为空");
        return false;
      } else {
        const params = {
          username: this.account,
          password: this.password,
          role: 0
        };
        // debugger
        this.$http
          .post("insert", { table: "people", data: params })
          .then(item => {
            this.$toast("注册成功");
            setTimeout(() => {
              this.$router.replace({
                path: "login"
              });
            }, 1000);
          });
      }

      // 登录成
    },

    //退出登录按钮
    logout() {
      Toast("退出登录成功,清除token");
      this.$store.commit("CHANGE_TOKEN", 0);
      this.toggle = true;
      this.account = "";
      this.password = "";
    }
  }
};
</script>

<style lang="less" scoped>
.login {
  > section {
    .tip {
      padding: 6vw 3vw;
      color: rgb(224, 145, 71);
      letter-spacing: 2px;
      font-size: 16px;
    }
  }
}
</style>
